<template>
  <div id="appbox" class="theme-default" ref="appbox">
    <transition name="el-fade-in-linear">
      <router-view></router-view>
    </transition>
  </div>
</template>
<style lang="scss">
@import "@/assets/css/variable.scss";
@import "@/assets/css/element-ui-reset.scss";
@import "@/assets/theme/index.scss";
@import "@/assets/css/header/headerReset.scss";
@import "@/assets/css/header/headerDefault.scss";
</style>
<script>
import { mapGetters } from 'vuex'
export default {
  name: "App",
  data(){
    return{
      target:'',
    }
  },
  mounted() {
    this.target = this.$refs.app;
    let a='default';
    // this.setTheme(a)
  },
  computed: {
    ...mapGetters(['themeCls'])
  },
  methods: {
    setTheme(theme) {
      console.log('---------32',theme);
      
      const target = this.$refs.appbox
      if (theme) {
        // target.className = `theme-${theme}`
      } else {
        // 如果刷新页面，则读取 localStorage的值来设置主题
        target.className = `theme-${localStorage.getItem('theme')}`
      }
    }
  },
  components: {
    
  },
  watch: {
    themeCls(theme) {
      this.setTheme(theme)
    }
  },
  beforeRouteEnter(to, from, next) {
    if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){  //测试当前是哪个手机系统，可根据业务需要选择
        console.log("现在是手机端")
    }else {
        console.log("现在是PC端")
    }
  }
};
</script>

